/*
 * @Description:
 * @Version: 2.0
 * @Autor: Seven
 * @Date: 2023-09-21 13:44:28
 * @LastEditors: Seven
 * @LastEditTime: 2023-09-26 15:14:14
 */
import React, { Suspense, memo } from "react";
import { Layout, Space } from "antd";
import HeaderTitle from "@/components/HeaderTitle/index";
import MenuNavigation from "@/components/MenuNavigation";
import { useRoutes } from "react-router-dom";
import routes from "@/router";
const { Header, Content } = Layout;
function App() {
  const headerStyle: React.CSSProperties = {
    textAlign: "center",
    color: "#fff",
    height: "55px",
    lineHeight: "55px",
    backgroundColor: "rgb(14, 64, 85)",
    padding: "0 0",
  };

  const contentStyle: React.CSSProperties = {
    // minHeight: "120px",
    // lineHeight: "520px",
    padding: "30px",
    // color: "#fff",
    backgroundColor: "rgb(14, 64, 85)",
  };
  return (
    <div>
      <Space direction="vertical" style={{ width: "100%" }} size={[0, 48]}>
        <Layout>
          <Header style={headerStyle}>
            <HeaderTitle />
          </Header>
          <Content style={contentStyle}>
            <MenuNavigation />
            <Suspense fallback={<div>loading~</div>}>
              {useRoutes(routes)}
            </Suspense>
          </Content>
        </Layout>
      </Space>
    </div>
  );
}

export default memo(App);
